<template>
    <div id="lightUpdate">
      <div>
        <Form ref="lightUpdate" :model="formModal" :rules="formMsgRule" :label-width="120">
          <FormItem label="商品类型：" prop="lightKinds">
            <Select v-model="formModal.lightKindsId" style="width:30%">
              <Option v-for="item in lightKindsData" :value="item.pkid" :key="item.pkid">{{ item.kindName }}</Option>
            </Select>
          </FormItem>
          <FormItem label="商品名：" prop="lightName">
            <Input v-model="formModal.lightName" placeholder="请输入商品名"/>
          </FormItem>
          <FormItem label="英文商品名：" prop="enlightName">
            <Input v-model="formModal.enlightName" placeholder="请输入商品名"/>
          </FormItem>
          <FormItem label="商品型号：" prop="lightModal">
            <Input v-model="formModal.lightModal" placeholder="请输入商品型号"/>
          </FormItem>
          <FormItem label="商品特征：" prop="lightTrait">
            <Input v-model="formModal.lightTrait" placeholder="请输入商品特征"/>
          </FormItem>
          <FormItem label="英文商品特征：" prop="enlightTrait">
            <Input v-model="formModal.enlightTrait" placeholder="请输入商品特征"/>
          </FormItem>
          <FormItem label="相关认证：" prop="attestation">
            <Input v-model="formModal.attestation" placeholder="请输入相关认证"/>
          </FormItem>
          <FormItem label="图片场景：" prop="img">
            <upload-files
              ref="bigScreenBgUpload"
              name="图片"
              :formatArr="[4]"
              :multiple="false"
              :max-size="5000"
              :accept="imageStr"
              :editData="imgData"
              @beforeUpload="beforeUpload"
            ></upload-files>
          </FormItem>
          <FormItem label="应用场景：" prop="scenarios">
            <Input type="textarea" v-model="formModal.scenarios" placeholder="请输入应用场景"/>
          </FormItem>
          <FormItem label="英文场景：" prop="enScenarios">
            <Input v-model="formModal.enScenarios" placeholder="请输入英文场景"/>
          </FormItem>
        </Form>
      </div>
      <div class="formButtonDiv">
        <Button class="buttonDiv" @click="$router.go(-1);">返回</Button>
        <Button class="buttonDiv" type="primary" @click="submitUpdate">提交</Button>
      </div>
    </div>
</template>

<script>

    import UploadFiles from '@/components/upload-files/upload-files';

    export default {
        components: {
            UploadFiles
        },
        name: "lightUpdate",
        data(){
            return {
                imgData: {},
                imageStr:".BMP,.JPG,.JPEG,.PNG,.GIF",
                formModal:{
                    lightName:"",//产品名
                    lightModal:"",//型号
                    lightTrait:"",//特征
                    enlightTrait:"",
                    scenarios:"",//场景
                    lightKindsId:"",//产品种类
                    lightImg:"",
                    attestation:"",//应用场景
                },
                lightImages:"",
                lightKindsData:[
                  {pkid:0,kindName:"种类1"},
                  {pkid:1,kindName:"种类2"},
                  {pkid:2,kindName:"种类3"}
                ],
                formMsgRule:{
                    lightName: [
                        { required: true, message: '请输入产品名', trigger: 'blur' },
                    ],
                    lightModal: [
                      { required: true, message: '请输入产品型号', trigger: 'blur' },
                    ],
                    lightTrait: [
                      { required: false, message: '请输入产品特征', trigger: 'blur' },
                    ],
                    enlightTrait: [
                        { required: false, message: '请输入产品特征', trigger: 'blur' },
                    ],
                    scenarios: [
                      { required: false, message: '请输入适用场景', trigger: 'blur' },
                    ],

                },
            }
        },
        methods:{
          checkedImgWidthHeight(file, whenReady) {
            var reader = new FileReader;
            reader.onload = function (evt) {
              var image = new Image();
              image.onload = function () {
                var width = this.width;
                var height = this.height;
                //待加载完成后，再回调；
                if (whenReady) whenReady(width, height);
              };
              image.src = evt.target.result;
            };
            reader.readAsDataURL(file);
          },
          beforeUpload(file) {
            var that = this;
            this.checkedImgWidthHeight(file, function (width, height) {
              that.lightImage = file;
            })
          },
          getAllLightKindsData(){
            var that=this;
            return new Promise(resolve => {
              this.$app.post('/lightKinds/getLightKindsPage', {}).then((res)=>{
                if(res.data.code==0){
                  that.lightKindsData=res.data.data.list;
                }
                // console.log(res);
                resolve();
              })
            })

          },
          submitUpdate(){
            let that=this;
            this.$refs["lightUpdate"].validate(valid => {
              if(valid){
                // lightImage: {}
                // lightKindsId: 26
                // lightModal: "3"
                // lightName: "2"
                // lightTrait: ""
                // scenarios: ""
                // console.log(that.formModal.lightImg)
                var formData=new FormData();
                formData.append('pkid',that.formModal.pkid)
                formData.append('lightKindsId',that.formModal.lightKindsId);
                formData.append('lightModal',that.formModal.lightModal);
                formData.append('lightName',that.formModal.lightName);
                formData.append('enlightName',that.formModal.enlightName);
                formData.append('lightTrait',that.formModal.lightTrait);
                formData.append('enlightTrait',that.formModal.enlightTrait);
                formData.append('scenarios',that.formModal.scenarios)
                formData.append('enScenarios',that.formModal.enScenarios);
                formData.append('attestation',that.formModal.attestation);
                formData.append('lightImg',that.formModal.lightImg);
                formData.append('file',that.lightImage);


                this.$app.post('/light/updateLight', formData).then((res)=>{
                  if(res.data.code==0){
                    that.$Message.success("添加成功");
                    that.$router.push({
                      name:'light',
                    });
                  }
                  // console.log(res);
                  // resolve();
                })
              }
            })

          },
          getLightById(id){
            let that=this;
            return new Promise(resolve => {
              this.$app.post('/light/getLightById', {
                pkid:id
              }).then((res)=>{
                if(res.data.code==0){
                  that.formModal=res.data.data;
                  console.log(that.formModal)
                }
                resolve();
              })
            })
          }
        },

      mounted() {
        let that=this;
        this.getAllLightKindsData().then(()=>{
          //
          var defaultItem=that.lightKindsData.find((item)=>{
            return (item.isDefault==1);
          });
          if(defaultItem==null){
            defaultItem=that.lightKindsData[0];
          }
          that.formModal.lightKindsId=defaultItem.pkid;
        });
        var msg=this.$route.query;
        this.getLightById(msg.lightId).then(()=>{
          var str=ajaxUrl+that.formModal.lightImg;

          that.imgData = {
            name:'',
            src:str
          };
        });
        // console.log(msg);
      }
    }
</script>

<style lang="less" scoped>
  #lightUpdate{
    width: 70%;
    margin: 0 auto;
    padding-top: 3em;
    .formButtonDiv{
      float: right;
      & .buttonDiv{
        /*margin: 0 .5em;*/
      }
    }
  }

</style>
